<template>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="row header">
            <div class="col-sm-4 col-md-4 col-lg-4">
              <router-link to="/">
                <button type="button" class="btn btn-default btn-sm">首页
                  <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                </button>
              </router-link>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 text-center">
              <strong>添加房产中介</strong>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 text_align_right">
              <button type="button" @click="submit" class="btn btn-primary btn-sm">确认保存
                <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <form>
            <div class="form-group">
              <label for="zjname">中介公司名字</label><span class="text-danger"> *</span>
              <input type="text" class="form-control" id="zjname" v-model="zj.name" placeholder="请输入中介全称或简称...">
            </div>
            <div class="form-group">
              <label for="zjdesc">简介</label>
              <textarea class="form-control" id="zjdesc" rows="2" v-model="zj.desc" placeholder="简介为选填..."></textarea>
            </div>
            <div class="form-group">
              <Radio @radioChange="radioChange" :items="radioOption"></Radio>
            </div>
            <div class="form-group">
              <label for="zjcomment">评论</label>
              <textarea class="form-control" id="zjcomment" rows="3" v-model="zj.comment" placeholder="我宣誓，所填评价真实、客观、公证..."></textarea>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
strong {font-size:16px;}
.label {
  cursor:pointer;
  margin-right:3px;
}
/*
.list-group-item {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
*/
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
  .text_align_right {text-align:right;}
}
@media (max-width: 768px) {
  .header > div {
    margin:6px 0;
  }
}
</style>
<script>
import Radio from '@/components/Radio.vue'

export default {
  name: 'Edit',
  components: {
    Radio
  },
  data: function () {
    return {
      radioOption: [
        {
          name: 'label',
          value: 1,
          option: '服务赞',
          color: 'btn-success',
          active: false
        },
        {
          name: 'label',
          value: 2,
          option: '服务差',
          color: 'btn-warning',
          active: false
        },
        {
          name: 'label',
          value: 3,
          option: '黑中介',
          color: 'btn-danger',
          active: false
        }
      ],
      zj: {
        type: 1
      }
    }
  },
  mounted: function () {
  },
  methods: {
    radioChange (v) {
      this.zj.type = v
    },
    checkMust () {
      if (this.zj.name.length < 1) {
        alert('中介公司名字不能为空！')
        return false
      }
      return true
    },
    submit () {
      if (this.checkMust() === false) {
        return false
      }
      this.axios.post('/saveinfo', this.qs.stringify(this.zj))
        .then((res) => {
          if (res.data.RetCode !== 2000000) {
            alert('保存失败，' + res.data.Msg)
            return false
          }
          alert('保存成功')
          location.reload()
        })
        .catch((err) => console.log(err))
    }
  }
}
</script>
